<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vuex</title>
	<script src="vue.js"></script>
	<script src="https://unpkg.com/vuex"></script>
</head>
<body>
	<div id="app">
		<Counter></Counter>
	</div>
	<script>
		const store = new Vuex.Store({
			state:{
				count:0
			},
			mutations:{
				increment(state){
					state.count++
				}
			},
			actions:{
				increment(context){
					context.commit('increment');
				}
			}
		});
		const Counter = {
			template:`<div>{{count}}</div>`,
			computed:{
				count(){
					return this.$store.state.count
				}
			}
		}
		console.log(store.state.count);
		store.commit("increment");
		console.log(store.state.count);
		var vm = new Vue({
			el:"#app",
			store,
			components:{ Counter },
			data:{
				message:"Hello World"
			}
		});
	</script>
</body>
</html>